<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/login.css">
  
</head>

<body>
  <header>
    <div id="box">
      <span> <img src="assets/images/HUAWEI.svg" class="adHeadPic" style="height: 24px;width:108px;margin-top: 0px;">
      </span>
      <span><a href="index.html">华为商城</a> </span>
    </div>
  </header>
  <section>
    <h2>华为账号登录</h2>
    <div id="form">
      <form id="login">

        <p class="userin">

          <label>请输入用户名：</label>
          <input type="text" name="username" placeholder="手机号/邮件地址/账户名">

        </p>
        <p class="passin">
          <label>请输入密码：</label>
          <img src="../assets/images/close.png" alt="" id="eye">
          <input type="password" name="password" id="passhaid" placeholder="密码">
        </p>
        <p class="mian">
          <i>
            <input type="checkbox" id="check">
            <label for="check">记住我</label>


          </i>
          
          <i><a href="http://localhost:777/js0506/dist/reg.html" id="toreg">点击注册</a></i>
        </p>

        <div>
          <button type="submit" id='btn'>登录</button>
        </div>
      </form>
    </div>

  </section>

  <footer>
    <div id="footer">
        <p>
            <img src="assets/images/footlogo.png" alt="">
        </p>
        <p>
            <ul>
                <li>隐私声明 服务协议 COOKIES Copyright © 2012-2021 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号</li>
                <li>增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</li>
            </ul>
        </p>
    </div>
</footer>



  <script src="js/jquery-3.5.1.min.js"></script>
  <!-- 引入jquery第3方插件 -->
  <script src="js/layer.js"></script>
  <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  <script src="js/utilsa.js"></script>
  <script>
    $('#btn').click(function () {


      $.get('../login.php', $('#login').serialize(), null, 'json').then(res => {
        // alert(res.msg)
        layer.alert(res.msg, {}, function () {
          layer.closeAll()
         


          if (res.type == "success") {
            $.cookie($(" #userhaid ").val(), $(" #passhaid ").val(),{expires: 7});

            self.location = './index.html';
          }

        })
      })


      return false  //取消默认设置
    })

    $("#login").validate({
      // 规则
      rules: {
        // key:表单域中的name名称
        username: {
          // 规则
          required: true,
          minlength: 2,
          maxlength: 5,
          checkuser: true
        },
        password: {
          // 规则
          required: true,
          minlength: 6,
          maxlength: 10,
          checkuser: true
        }
        
      
      },
      // 验证失败后消息提示
      messages: {
        username: {
          required: '账号或密码不能为空',
          minlength: '长度不能少于2位',
          maxlength: '长度不能多于5位'
        },
        password: {
          required: '账号或密码不能为空',
          minlength: '长度不能少于6位',
          maxlength: '长度不能多于10位'
        }
       
      },

      // 验证失败后元素样式
      errorClass: 'junerror',
      // 验证通过后回调方法
      submitHandler: function (form) {
        $.post('login.php', $('#login').serialize(), null, 'json').then(res => {
          layer.alert(res.msg, {}, function () {
            layer.closeAll()
            // console.log('aaaa')
          })
        })
      }
    })



























    var eye = document.getElementById('eye');
    var pwd = document.getElementById('passhaid');
    // 2. 注册事件 处理程序
    var flag = 0;
    eye.onclick = function () {
      if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'assets/images/open.png';
        flag = 1; // 赋值操作
      } else {
        pwd.type = 'password';
        eye.src = 'assets/images/close.png';
        flag = 0;
      }

    }










  </script>
</body>

</html>